<template>
  <el-form ref="ruleForm" :rules="rules" :="attrs" class="pi-form" :validate-on-rule-change="false">
    <div v-for="(item, i) in formList" :key="i">
      <div
        class="form-content"
        :class="[isInfo ? 'background' : '', { 'form-content-group': showByGroup }]"
        v-if="item.list.length > 0"
      >
        <div class="group-name" v-if="showByGroup" @click="groupVisible(item)">
          <el-icon size="12">
            <Plus v-if="item.groupShow === false" />
            <Minus v-else />
          </el-icon>
          {{ item.groupName }}
        </div>
        <el-row v-for="(array, j) in item.list" :key="j" v-show="item.groupShow !== false">
          <el-col
            v-for="el in array"
            :key="el.name"
            :span="el.col || 24 / (array.length === 1 ? 2 : array.length)"
          >
            <el-form-item :prop="el.name">
              <template #label>
                <div class="row-text">
                  <el-tooltip placement="top" :content="el.label">
                    <span>{{ el.label + '：' }}</span>
                  </el-tooltip>
                </div>
                <el-popover
                  placement="bottom-start"
                  :title="el.label + '规则：'"
                  :width="'30vw'"
                  trigger="hover"
                  v-if="el.description || el.descriptionFile"
                >
                  <template #reference>
                    <span class="tips">
                      <el-icon size="20"><Warning /></el-icon>
                    </span>
                  </template>
                  <p v-html="el.description.replace(/\n/g, '<br/>')" v-if="el.descriptionFile"></p>
                  <!-- INPUT -->
                  <div
                    v-if="
                      el.filedType === 'INPUT' &&
                      el.dataType !== 'java.lang.Long' &&
                      el.descriptionFile
                    "
                  >
                    <template v-if="el.name === 'name'">
                      <div>
                        <span>{{ getLinkData(el)[0].descPrev }}</span>
                        <el-link
                          style="margin: 0 4px"
                          type="primary"
                          :underline="false"
                          @click="downloadTips(item)"
                        >
                          {{ getLinkData(el)[0].fileName }}
                        </el-link>
                        ,
                        <el-link
                          style="margin: 0 4px"
                          type="primary"
                          :underline="false"
                          @click="downloadTips(item)"
                        >
                          {{ getLinkData(el)[1].fileName }}
                        </el-link>
                        <span>{{ getLinkData(el)[1].descPrev }}</span>
                      </div>
                      <div>
                        <span>{{ getLinkData(el)[1].descNext }}</span>
                      </div>
                    </template>
                    <template v-else>
                      <div v-for="item in getLinkData(el)" :key="item.fileOid">
                        <span>{{ item.descPrev }}</span>
                        <el-link
                          style="margin: 0 4px"
                          :underline="false"
                          type="primary"
                          @click="downloadTips(item)"
                        >
                          {{ item.fileName }}
                        </el-link>
                        <span>{{ item.descNext }}</span>
                      </div>
                    </template>
                  </div>
                  <template v-if="el.filedType === 'SELECT' && el.descriptionFile">
                    <div v-for="item in getLinkData(el)" :key="item.fileOid">
                      <span>{{ item.descPrev }}</span>
                      <el-link type="primary" :underline="false" @click="downloadTips(item)">
                        {{ item.fileName }}
                      </el-link>
                      <span>{{ item.descNext }}</span>
                    </div>
                  </template>
                </el-popover>
              </template>
              <FormRender
                :option="el"
                :data="submitData"
                v-bind="$attrs"
                @inputChange="inputChange"
              >
                <template #[getSlotName(el)]="{ option }">
                  <slot :name="el.name" :option="option"></slot>
                </template>
              </FormRender>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </div>
  </el-form>
</template>

<script setup>
const attrs = useAttrs();
const { formList, submitData } = defineProps({
  formList: {
    type: Array,
    default: () => {
      return [];
    },
  },
  isInfo: {
    type: Boolean,
    default: true,
  },
  showByGroup: {
    type: Boolean,
    default: false,
  },
});

const rules = ref({});

watch(
  () => formList.value,
  (list) => {
    list.forEach((v) => {
      const arr = v.list.flat(Infinity);
      arr.forEach((k) => {
        getRule(k).length && (rules.value[k.name] = getRule(k));
      });
    });
  },
  { deep: true },
);
const inputChange = (val, name) => {
  rules.value.RegionVer[0]['required'] = val === '是';
};
const groupVisible = (item) => {
  item.groupShow = item.groupShow === undefined ? false : !item.groupShow;
};
/**获取绑定 */
const ruleForm = ref();
const validate = (valid, fields) => {
  return ruleForm.value.validate;
};
const checkForm = () => {
  ruleForm.value.validate((valid, fields) => {
    for (let v in fields) {
      fields[v].forEach((v) => {
        window.$message.warning(v.message);
      });
    }
  });
};
const clearValidate = () => {
  return ruleForm.value.clearValidate();
};
const getSlotName = (el) => {
  return el.name;
};
// 多选下拉框校验长度500字符
const validateMutiSelectStrLen = (rule, val, callback) => {
  if (val.toString.length > 500) {
    return callback(new Error(rule.message));
  }
  return callback();
};
const getRule = (data) => {
  const baseRule = {
    required: data.required,
    message: '请输入' + data.label,
    trigger: ['blur', 'change'],
  };
  const baseStrLenRule = {
    message: `${data.label}应在 500 字符以内`,
    max: 500,
    trigger: ['blur', 'change'],
  };
  const mutiSelectStrLenRule = {
    message: `${data.label}应在 500 字符以内`,
    validator: validateMutiSelectStrLen,
    trigger: ['blur', 'change'],
  };
  if (data.rules) {
    return [baseRule, data.rules];
  } else {
    return data.single ? [baseRule, baseStrLenRule] : [baseRule, mutiSelectStrLenRule];
  }
};
defineExpose({
  ruleForm,
  validate,
  checkForm,
  clearValidate,
});
</script>

<style scoped lang="less">
.pi-form {
  .title {
    font-size: 16px;
    font-weight: bolder;
  }
  .form-content-group {
    border: 1px solid #dcdfe6;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 3px;
    position: relative;
    .group-name {
      position: absolute;
      top: -11px;
      left: 20px;
      padding: 0 10px;
      background: #fff;
      color: #999;
      cursor: pointer;
    }
  }
  .row-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
  }

  :deep(.el-form-item) {
    margin-bottom: 12px;
    flex-direction: column;
    .el-form-item__label {
      justify-content: flex-start;
      align-items: center;
    }
    .el-form-item__content {
      width: 100%;
    }
    .tips {
      display: inline-block;
      width: 24px;
      height: 24px;
      cursor: pointer;
      border-radius: 50%;
      // margin-left: 10px;
      color: #92929d;
      &:hover {
        color: #0062ff;
      }
    }
  }
}
</style>
